<template>
  <div class="center_div">
    <el-form ref="form" :model="applyDetail" label-width="100px" style="margin-top:50px;">
      <el-form-item label="使用人" prop="username">
        <el-input v-model="applyDetail.username" disabled style="width: 50%;"></el-input>
      </el-form-item>
      <el-form-item label="申请模块" prop="applyModule">
        <el-tag>{{applyDetail.applyModule}}</el-tag>
      </el-form-item>
      <el-form-item label="使用时间" prop="useTime">
        <el-date-picker v-model="applyDetail.useTime" type="daterange"
                        value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="使用范围" prop="region" >
        <el-input v-model="applyDetail.region" placeholder="请填写使用范围，例如：北京市" style="width: 50%;"></el-input>
      </el-form-item>
      <el-form-item label="个人使用" prop="isPersonal">
        <el-radio-group v-model="applyDetail.isPersonal">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="applyDetail.isPersonal === '0'" label="其他人" prop="otherPersonal">
        <el-input v-model="applyDetail.otherPersonal" placeholder="请填写一同使用的人" style="width: 50%;"></el-input>
      </el-form-item>
      <el-form-item label="申请原因" prop="reason">
        <el-input type="textarea" placeholder="请填写使用原因，越详细审批通过率越高哦" v-model="applyDetail.reason" style="width: 50%;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即申请</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "apply-car",
  data() {
    return {
      applyDetail: {username: this.$store.state.user.user.employeename ,applyModule: '用车申请', useTime: '', reason: '', region: '', isPersonal: '1', otherPersonal: '',status: 0}
    }
  },
  methods: {
    onSubmit() {
      if (this.applyDetail.useTime.length !== 2) {
        this.$message.error('未选择日期')
        return
      }
      if (this.applyDetail.reason.length === 0 || this.applyDetail.region.length === 0) {
        this.$message.error('存在参数未填写')
        return
      }
      let useTime =  this.applyDetail.useTime[0] + ' -> ' +  this.applyDetail.useTime[1]
      this.applyDetail.useTime = useTime
      console.log(this.applyDetail)
      // this.applyCar()
    },
    // async applyCar(){
    //   let {code ,data ,msg} = await this.$post('/##',
    //           {data: this.applyDetail})
    //   if(code === 200) {
    //     console.log(data)
    //     this.$message({
    //       message: '申请成功，请等待后序审批',
    //       type: 'success'
    //     })
    //   }else {
    //     this.$message.error(msg)
    //   }
    // },
  }
}
</script>

<style>
  .center_div{
    width: 60%;
    margin-left:auto;
    margin-bottom: 50px;
    margin-top: 50px;
  }
</style>